<div class="alert-rules-container">
  <div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h5 class="mb-0">库存预警规则管理</h5>
      <button class="btn btn-primary btn-sm" (click)="openRuleForm()">
        <i class="bi bi-plus-circle me-1"></i>新增规则
      </button>
    </div>
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-striped table-hover">
          <thead>
            <tr>
              <th>规则类型</th>
              <th>适用范围</th>
              <th>阈值</th>
              <th>优先级</th>
              <th>状态</th>
              <th>更新时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngIf="!alertRules || alertRules.length === 0">
              <td colspan="7" class="text-center py-3">暂无预警规则</td>
            </tr>
            <tr *ngFor="let rule of alertRules">
              <td>{{ rule.isGlobal ? '全局规则' : '特定规则' }}</td>
              <td>
                <span *ngIf="rule.isGlobal">所有货品</span>
                <ng-container *ngIf="!rule.isGlobal">
                  <div *ngIf="rule.goodsCode">货品: {{ rule.goodsCode }}</div>
                  <div *ngIf="rule.goodsType">类型: {{ rule.goodsType }}</div>
                  <div *ngIf="rule.warehouseName">仓库: {{ rule.warehouseName }}</div>
                </ng-container>
              </td>
              <td>{{ rule.thresholdValue }}</td>
              <td>{{ rule.priority }}</td>
              <td>
                <span class="badge" [ngClass]="rule.isActive ? 'bg-success' : 'bg-secondary'">
                  {{ rule.isActive ? '启用' : '禁用' }}
                </span>
              </td>
              <td>{{ rule.updatedAt | date:'yyyy-MM-dd HH:mm' }}</td>
              <td>
                <button class="btn btn-sm btn-outline-primary me-1" (click)="editRule(rule)">
                  <i class="bi bi-pencil"></i>
                </button>
                <button class="btn btn-sm btn-outline-danger" (click)="deleteRule(rule.id)">
                  <i class="bi bi-trash"></i>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- 规则表单模态框 -->
<div class="modal fade" #ruleFormModal tabindex="-1" aria-labelledby="ruleFormModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="ruleFormModalLabel">{{ isEditMode ? '编辑预警规则' : '新增预警规则' }}</h5>
        <button type="button" class="btn-close" (click)="closeModal()"></button>
      </div>
      <div class="modal-body">
        <form [formGroup]="ruleForm">
          <div class="mb-3">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="isGlobal" 
                    formControlName="isGlobal" (change)="onRuleTypeChange()">
              <label class="form-check-label" for="isGlobal">
                全局规则（适用于所有货品）
              </label>
            </div>
          </div>

          <div *ngIf="!ruleForm.value.isGlobal">
            <div class="mb-3">
              <label for="goodsCode" class="form-label">货品编码</label>
              <input type="text" class="form-control" id="goodsCode" 
                    formControlName="goodsCode" placeholder="留空表示适用于所有货品">
            </div>
            
            <div class="mb-3">
              <label for="goodsType" class="form-label">货品类型</label>
              <input type="text" class="form-control" id="goodsType" 
                    formControlName="goodsType" placeholder="留空表示适用于所有类型">
            </div>
            
            <div class="mb-3">
              <label for="warehouseName" class="form-label">仓库名称</label>
              <input type="text" class="form-control" id="warehouseName" 
                    formControlName="warehouseName" placeholder="留空表示适用于所有仓库">
            </div>
          </div>
          
          <div class="mb-3">
            <label for="thresholdValue" class="form-label">库存预警阈值</label>
            <input type="number" class="form-control" id="thresholdValue" 
                  formControlName="thresholdValue" min="0" required>
            <div class="form-text text-danger" 
                  *ngIf="ruleForm.get('thresholdValue')?.invalid && ruleForm.get('thresholdValue')?.touched">
              请输入有效的阈值（不小于0）
            </div>
          </div>
          
          <div class="mb-3">
            <label for="priority" class="form-label">优先级</label>
            <select class="form-select" id="priority" formControlName="priority">
              <option value="1">1 - 最高</option>
              <option value="2">2 - 高</option>
              <option value="3">3 - 中</option>
              <option value="4">4 - 低</option>
              <option value="5">5 - 最低</option>
            </select>
          </div>
          
          <div class="mb-3">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="isActive" 
                    formControlName="isActive">
              <label class="form-check-label" for="isActive">
                启用规则
              </label>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="closeModal()">取消</button>
        <button type="button" class="btn btn-primary" (click)="saveRule()" 
                [disabled]="ruleForm.invalid">保存</button>
      </div>
    </div>
  </div>
</div> 